import React, { useEffect, useState } from "react";
import { NavBar } from "react-vant";
import { useNavigate } from "react-router-dom";
import { getlist } from "../../request/index";
import { Flex, Loading } from "react-vant";

function All() {
  const navigate = useNavigate();
  const [list, setList] = useState([]);
  useEffect(() => {
    getlist().then((res) => {
      setList(res.data.data);
    });
  }, []);
  const dian=(id:number)=>{
    navigate('/xiang/'+id)
  }
  return (
    <div>
      <div
        style={{
          position: "fixed",
          top: "0",
          left: "0",
          width: "100%",
          zIndex: 999,
        }}
      >
        <NavBar onClickLeft={() => navigate(-1)} title="更多" />
      </div>
      <div style={{ marginTop: "50px" }}>
        {list.map((item: any) => {
          return (
            <dl
              key={item.id}
              style={{
                display: "flex",
                justifyContent: "space-between",
                width: "100%",
                height: "150px",
              }}
              onClick={()=> dian(item.id)}
            >
              <dt style={{ width: "40%", height: "100%" }}>
                <img
                  src={item.imgPath}
                  alt=""
                  style={{ width: "100%", height: "100%" }}
                />
              </dt>
              <dd style={{ width: "60%", height: "100%" }}>
                <p style={{ fontWeight: "bold" }}>{item.showName}</p>
                <p>{item.showDate}</p>
                <p>{item.showCity}</p>
                <p style={{ color: "red", fontWeight: "bold" }}>
                  {item.showPrice}
                </p>
              </dd>
            </dl>
          );
        })}
      </div>
      <div>
        <Flex style={{marginLeft: "45%"}}>
          <Flex.Item span={16}>
            <Loading type="ball" />
          </Flex.Item>
        </Flex>
      </div>
    </div>
  );
}

export default All;
